import React,{useState,useEffect} from "react"
import {Table,Pagination,Modal} from 'antd'
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';
import './index.scss'
import {FullscreenOutlined} from '@ant-design/icons'

const SortableItem = SortableElement(props => <tr {...props} />);
const SortableBody = SortableContainer(props => <tbody {...props} />);

 function LlxTable(props) {
  

  const paginationStyle = {float:'right',margin:'30px 20px 0 0', position: 'absolute',
  bottom: '20px',
  right: '30px'}

    // 获取用户浏览器高度
  const [width,setWidth]=useState(0)

  useEffect(()=>{
      setWidth(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
    },[])
  const {loading,pagination,getNewList,height,paginationHide,setPagination,selectedRowShow,rowSelection,total,columns,dataSource,components} = props

  // 排序
  const  handleTableChange = (pagination, filters, sorter) => {
    setPagination({
      current: 1,
      pageSize: 10
    })
  };
// 展示总数
  const showTotal =()=>{
    return '共计'+ total +'条'
  }
  // 切换分页
  const onChange = (value,size) =>{
    setPagination({
      current: value,
      pageSize: size
    })
    getNewList({
      current: value,
      pageSize: size
    })
  }

 const onSortEnd = ({ oldIndex, newIndex }) => {
    const { dataSource,setDataSource } = props;
    if (oldIndex !== newIndex) {
      const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
        el => !!el,
      );

      setDataSource(newData);
    }
  };

  const DraggableContainer = props => (
    <SortableBody
      useDragHandle
      disableAutoscroll
      helperClass="row-dragging"
      onSortEnd={onSortEnd}
      {...props}
    />
  );


  const DraggableBodyRow = ({ className, style, ...restProps }) => {
    // function findIndex base on Table rowKey props and should always be a right array index
    const index = dataSource.findIndex(x => x.sort === restProps['data-row-key']);
    return <SortableItem index={index} {...restProps} />;
  };

  const tableProps = {
    dataSource,
    columns,
    pagination:false
  }

  

  const [isModalVisible,setIsModalVisible] = useState(false)
  const onCancel = () => {
    setIsModalVisible(false)
  }

 return <div>
<FullscreenOutlined   className="table-icon-1" onClick={()=>setIsModalVisible(true)}/>
 {
   components?<Table
   rowSelection={rowSelection}
   scroll={{ x: '500px', y: (width - height) + 'px' }}
   rowKey={record => record.sort}
   loading={loading}
   components={{
    body: {
      wrapper: DraggableContainer,
      row: DraggableBodyRow,
    },
  }}
   onChange={handleTableChange}
   className="custom_table_style" {...tableProps}/>:(
    selectedRowShow?<Table
    rowSelection={rowSelection}
    scroll={{ x: '500px', y: (width - height) + 'px' }}
    rowKey={record => record[props.keyName?props.keyName:'id']}
    loading={loading}
    onChange={handleTableChange}
    className="custom_table_style" {...tableProps}/>:<Table
    scroll={{ x: '500px', y: (width - height) + 'px' }}
    rowKey={record => record.id}
    loading={loading}
    onChange={handleTableChange}
    className="custom_table_style" {...tableProps}/>
   )
 }


  {
    paginationHide?'':<Pagination onChange={onChange} showTotal={total?showTotal:''} style={paginationStyle} pageSize={pagination.pageSize} current={pagination.current} total={total} />
  }


  <Modal  wrapClassName="modal-full"   visible={isModalVisible} footer={null} onCancel={onCancel}>
  {
   components?<Table
   rowSelection={rowSelection}
   scroll={{ x: '500px', y: (width - 120) + 'px' }}
   rowKey={record => record.sort}
   loading={loading}
   components={{
    body: {
      wrapper: DraggableContainer,
      row: DraggableBodyRow,
    },
  }}
   onChange={handleTableChange}
   className="custom_table_style" {...tableProps}/>:(
    selectedRowShow?<Table
    rowSelection={rowSelection}
    scroll={{ x: '500px', y: (width - 120) + 'px' }}
    rowKey={record => record[props.keyName?props.keyName:'id']}
    loading={loading}
    onChange={handleTableChange}
    className="custom_table_style" {...tableProps}/>:<Table
    scroll={{ x: '500px', y: (width - 120) + 'px' }}
    rowKey={record => record.id}
    loading={loading}
    onChange={handleTableChange}
    className="custom_table_style" {...tableProps}/>
   )
 }

{
    paginationHide?'':<Pagination onChange={onChange} showTotal={total?showTotal:''} style={paginationStyle} pageSize={pagination.pageSize} current={pagination.current} total={total} />
  }

  </Modal>
  
 </div>
}

export default LlxTable
